<div id="main">
    <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="船厂">
                    <el-input v-model="searchData[0].value" placeholder="船厂名称"></el-input>
                </el-form-item>
                <el-form-item label="项目">
                    <el-input v-model="searchData[1].value" placeholder="项目名称"></el-input>
                </el-form-item>
                <el-form-item label="船号">
                    <el-input v-model="searchData[2].value" placeholder="船号"></el-input>
                </el-form-item>
                <el-form-item label="产品">
                    <el-input v-model="searchData[3].value" placeholder="产品名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="showMoreSearch">更多</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="reloadTable">查询</el-button>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20" v-if="moreSearchable">
            <el-col :span="24">
                <el-form-item label="产品编号">
                    <el-input v-model="searchData[4].value" placeholder="产品编号"></el-input>
                </el-form-item>
                <el-form-item label="采购情况">
                    <el-select v-model="searchData[5].value" placeholder="活动区域">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="未采购" value="0"></el-option>
                        <el-option label="已采购" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="到货情况">
                    <el-select v-model="searchData[6].value" placeholder="活动区域">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="未到货" value="0"></el-option>
                        <el-option label="已到货" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <el-table
            :data="product_tableData"
            style="width: 100%">
        <el-table-column
                type="index"
                width="50">
        </el-table-column>
        <el-table-column
                min-width="12%"
                sortable
                label="船厂">
            <template slot-scope="scope">
                <a href="javascript:;" @click="showProjectList(scope.row.shipyardId)">{{scope.row.shipyardName}}</a>
            </template>
        </el-table-column>
        <el-table-column
                min-width="10%"
                sortable
                label="项目">
            <template slot-scope="scope">
                <a href="javascript:;" @click="showShipList(scope.row.projectId)">{{scope.row.projectName}}</a>
            </template>
        </el-table-column>
        <el-table-column
                min-width="8%"
                sortable
                label="船号">
            <template slot-scope="scope">
                <a href="javascript:;" @click="showProductList(scope.row.shipId)">{{scope.row.shipNo}}</a>
            </template>
        </el-table-column>
        <el-table-column
                prop="classificationSociety"
                min-width="8%"
                sortable
                label="船级社">
        </el-table-column>
        <el-table-column
                min-width="10%"
                sortable
                label="产品">
            <template slot-scope="scope">
                <a href="javascript:;">{{scope.row.productName}}</a>
            </template>
        </el-table-column>
        <el-table-column
                prop="productCode"
                min-width="8%"
                sortable
                label="产品编号">
        </el-table-column>
        <el-table-column
                prop="certificateType"
                min-width="8%"
                sortable
                label="证书类型">
        </el-table-column>
        <el-table-column
                prop="handDate"
                min-width="11%"
                sortable
                label="交货日期">
        </el-table-column>
        <el-table-column
                prop="version"
                min-width="5%"
                sortable
                label="版本">
        </el-table-column>
        <el-table-column
                prop="mapNo"
                min-width="8%"
                sortable
                label="产品图号">
        </el-table-column>
        <el-table-column
                prop="cost"
                min-width="7%"
                sortable
                label="成本">
        </el-table-column>
        <el-table-column
                prop="isPurchased"
                min-width="7%"
                :formatter="booleanFormatter"
                label="是否已采购">
        </el-table-column>
        <el-table-column
                prop="isArrived"
                min-width="7%"
                :formatter="booleanFormatter"
                label="是否已到货">
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <template>
        <el-dialog title="项目列表" width="26%" :visible.sync="projectVisible" center>
            <div style="text-align: center">
                <el-form :inline="true" :model="search" class="demo-form-inline" size="mini">
                    <el-form-item label="项目">
                        <el-input v-model="search.projectName" placeholder="项目名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="loadProjectTableData">查询</el-button>
                    </el-form-item>
                </el-form>

                <el-table :data="project_tableData" style="width: 100%">
                    <el-table-column
                            type="index"
                            label="序号"
                            align="center"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="项目名称">
                        <template slot-scope="scope">
                            <a href="javascript:;" @click="showShipList(scope.row.id)">{{scope.row.name}}</a>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </el-dialog>

        <el-dialog title="船号列表" width="26%" :visible.sync="shipVisible" center>
            <div style="text-align: center">
                <el-form :inline="true" :model="search" class="demo-form-inline" size="mini">
                    <el-form-item label="船号">
                        <el-input v-model="search.shipNo" placeholder="船只编号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="loadShipTableData">查询</el-button>
                    </el-form-item>
                </el-form>

                <el-table :data="ship_tableData" style="width: 100%">
                    <el-table-column
                            type="index"
                            label="序号"
                            align="center"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="no"
                            align="center"
                            label="船号">
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>

        <el-dialog title="产品列表" :visible.sync="productVisible" >
            产品列表
        </el-dialog>
    </template>
</div>
<script>
    new Vue({
        el: '#main',
        data: function() {
            return {
                searchData:[{
                    attr:"ship.project.shipyard.shipyardName",
                    op:"like",
                    value:""
                },{
                    attr:"ship.project.projectName",
                    op:"like",
                    value:""
                },{
                    attr:"ship.shipNo",
                    op:"like",
                    value:""
                },{
                    attr:"productName",
                    op:"like",
                    value:""
                },{
                    attr:"productCode",
                    op:"like",
                    value:""
                },{
                    attr:"isPurchased",
                    op:"=",
                    value:""
                },{
                    attr:"isArrived",
                    op:"=",
                    value:""
                }],
                moreSearchable:false,
                search:{
                    projectName:"",
                    shipNo:"",
                    productName:""
                },
                product_tableData: [],
                pageInfo:{
                    "toPage":0,
                    "pageSize":10
                },
                projectVisible: false,
                shipVisible: false,
                productVisible: false,
                project_tableData:[],
                ship_tableData:[],
                click:{
                    shipyardId:"",
                    projectId:""
                }
            }
        },
        mounted:function () {
            this.loadPoductTableData();
        },
        methods: {
            reloadTable(){
                this.loadPoductTableData();
            },
            showMoreSearch(){
                if(this.moreSearchable){
                    this.moreSearchable = false;
                }else{
                    this.moreSearchable = true;
                }
            },
            loadPoductTableData(){
                var me =this;
                var conditions = {};
                conditions.page = this.pageInfo;
                conditions.conditions = this.searchData;
                SysApi.commenSubmit("/product/table",conditions,function (response) {
                    if(response.data){
                        me.product_tableData = response.data;
                    }
                });
            },
            booleanFormatter(row, column, cellValue, index){
                if(cellValue){
                    return "是";
                }else {
                    return "否";
                }
            },
            showProjectList(shipyardId){
                this.click.shipyardId = shipyardId;
                this.search.projectName = "";
                this.projectVisible = true;
                this.loadProjectTableData();
            },
            loadProjectTableData(){
                var me = this;
                SysApi.commenSubmit("/project/byshipyardId",{
                    "shipyardId":me.click.shipyardId,
                    "projectName":me.search.projectName
                },function (response) {
                    if(response.data){
                        me.project_tableData = response.data;
                    }
                });
            },
            showShipList(projectId){
                this.click.projectId = projectId;
                this.search.shipNo = "";
                this.shipVisible = true;
                this.loadShipTableData();
            },
            loadShipTableData(){
                var me = this;
                SysApi.commenSubmit("/ship/byprojectId", {
                    "projectId": me.click.projectId,
                    "shipNo": me.search.shipNo
                },function (response) {
                    if(response.data){
                        me.ship_tableData = response.data;
                    }
                });
            },
            showProductList(id){
                this.productVisible = true;
            }
        }
    })
</script>